<template>
  <div class="searchinfo">
    <van-nav-bar left-arrow @click-left="onClickLeft" fixed>
      <template #title>
        <div class="input">
          <van-search
            placeholder="搜索"
            :clearable="false"
            :autofocus="true"
            @click="goDetail('/home/search', '')"
          />
        </div>
      </template>
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab
        v-for="(tag, index) in songList"
        :key="index"
        :title="tag.type | translate"
      >
        <div v-if="tag.type === 'song'">
          <div
            class="songitem"
            v-for="(item, ti) in tag.list"
            :key="item.songid"
          >
            <div class="iconfont icon-gengduo"></div>
            <div
              :class="isactive == ti ? 'titleColor' : ''"
              @click="
                ($store.state.icon = false),
                  ($store.state.song =
                    item.songname + '-' + item.singer[0].name),
                  titleColor(ti, item.songname + '-' + item.singer[0].name)
              "
            >
              <p class="shang">{{ item.songname }}</p>
              <p class="xia">
                <span v-for="(singer, ii) in item.singer" :key="singer.id"
                  ><span v-if="ii !== 0"> · </span>{{ singer.name }}</span
                >
              </p>
            </div>
          </div>
        </div>
        <div v-if="tag.type === 'songlist'">
          <div
            class="songlistitem"
            v-for="item in tag.list"
            :key="item.songid"
            @click="goDetail('/home/songsheet', item.dissid)"
          >
            <img :src="item.imgurl" alt="" />
            <div>
              <p class="shang">{{ item.dissname }}</p>
              <p class="xia">
                创建人: {{ item.creator.name }}&nbsp;&nbsp;&nbsp;播放次数:
                {{ item.listennum | num }}
              </p>
            </div>
          </div>
        </div>
        <div v-if="tag.type === 'album'">
          <div
            class="songlistitem"
            v-for="item in tag.list"
            :key="item.albumID"
          >
            <img :src="item.albumPic" alt="" />
            <div>
              <p class="shang">{{ item.albumName }}</p>
              <p class="xia">
                {{ item.singer_list.name }}&nbsp;&nbsp;&nbsp;
                {{ item.singerName }}
              </p>
            </div>
          </div>
        </div>
        <div v-if="tag.type === 'singer'">
          <div
            class="songlistitem"
            v-for="item in tag.list"
            :key="item.singerID"
          >
            <img class="singerImg" :src="item.singerPic" alt="" />
            <div>
              <p class="shang">{{ item.singerName }}</p>
              <p class="xia">播放次数: {{ item.songNum | num }}</p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  props: ['id'],
  data: () => ({
    active: 0,
    pageNo: 0,
    t: [0, 2, 7, 8, 9],
    songList: [],
    isactive: null
  }),
  methods: {
    async onSearch(item) {
      const res = await this.$http.getSearch(this.$route.params.value, 1, item)
      this.songList.push(res.data.data)
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    titleColor(index, value) {
      this.isactive = index
      localStorage.song = value
    }
  },
  async created() {
    await this.onSearch(0)
    this.onSearch(2)
    this.onSearch(7)
    this.onSearch(8)
    this.onSearch(9)
  }
}
</script>
<style lang="less">
.searchinfo {
  margin-top: 54px;
  padding: 10px;
  .songitem {
    padding-top: 15px;
    height: 60px;
    margin-bottom: 10px;
    position: relative;
    .icon-gengduo {
      position: absolute;
      top: 40%;
      right: 20px;
    }
    p {
      margin: 0;
    }
    .shang {
      margin-bottom: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .xia {
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .songlistitem {
    width: 100%;
    display: flex;
    height: 80px;
    margin-bottom: 10px;
    img {
      width: 80px;
      height: 80px;
      margin-right: 20px;
    }
    .shang {
      width: 90%;
      margin-bottom: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .xia {
      font-size: 12px;
      display: flex;
      color: rgba(134, 126, 126, 0.514);
    }
    .singerImg {
      border-radius: 50%;
    }
  }
  .titleColor {
    color: rgb(10, 233, 159);
  }
}
</style>
